<template>
	<view class="content">

		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>

		<view class="booksItem">
			<image :src="bookInfo.coverUrl" alt=""
				style="display: inline-block;margin-right: 10px;width: 70px;height:88px;" />
			<view class="title">
				<text class="bookName">{{bookInfo.name}}</text>
				<span @click="copyData(bookInfo.name)" class="copySpan" style="top: 20px;left: 0;bottom: unset;">
					<image src="/static/book/bookInfo/复制.png" alt="" style="width: 12px;" mode="widthFix" />
					<text class="copyTitle">复制书名</text>
				</span>
			</view>
			<span class="title2">
				<image src="/static/home/画板2.png" alt="" mode="widthFix" />
				{{bookInfo.id?'连续30天收益：'+bookInfo.id.substring(bookInfo.id.length-4)+'元':''}}
			</span>
		</view>
		<span class="seleTip">
			<image src="/static/book/bookInfo/路径 1.png" alt="" mode="widthFix" />
			<text>选择推广平台 及推广方式</text>
		</span>
		<!-- 二维码插件 width height设置宽高 -->
		<view style="width: 0;height: 0;position: fixed;right: 200%;">
			<canvas  canvas-id="qrcode" :style="{width: `${300}px`, height: `${300}px`,display:block}" />
		</view>
		<view class="plateSele">
			<button :class="resultType==1?'douyin selePlate':'douyin unSelePlate'" @click="resultType=1">抖音</button>
			<button :class="resultType==2?'kuaishou selePlate':'kuaishou unSelePlate'" @click="resultType=2">快手</button>
		</view>
		<view class="promotionBox">
			<view class="promotionTitle">
				<span ref="codeTitle" @click="promotionToggle(1)"
					:class="promotionType==1?'codeTitle seleCodeTitle':'codeTitle'" style="left: 0;">
					<text style="margin-right:20% ;">搜索码推广</text>
				</span>
				<span ref="QRCodeTitle" @click="promotionToggle(2)"
					:class="promotionType==1?'QRCodeTitle':'QRCodeTitle seleQRCodeTitle'" style="right: 0;">
					<text style="margin-left:20% ;">挂载推广</text>
				</span>
			</view>
			<view class="promotionInfo" v-show="promotionType==1">
				<text class="textBox" user-select>
					{{ getCodeText(bookInfo.searchCode)}}
				</text>
				<view class="btns">
					<button class="getCodeBtn" @click="getCode">生成搜索码</button>
					<button class="courseBtn">
						挂载教程
						<image src="/static/book/bookInfo/路径 2.png" alt="" mode="widthFix" />
					</button>
				</view>
			</view>
			<view class="promotionInfo" v-show="promotionType==2">
				<span class="QRBox">
					<image v-show="!!bookInfo.douQRData&&resultType == 1" :src="bookInfo.douQRData" class="QRCodeBox"
						mode="scaleToFill"></image>
					<image v-show="!!bookInfo.kuaiQRData&&resultType == 2" :src="bookInfo.kuaiQRData" class="QRCodeBox"
						mode="scaleToFill"></image>
					<text class="QRText">
						视频挂载二维码<br>
						{{"使用"+(resultType==1?"抖音":"快手")+"扫一扫分享"}}
					</text>
					<button v-if="(!bookInfo.douQRData&&resultType == 1)||(!bookInfo.kuaiQRData&&resultType == 2)" class="getQRCodeBtn" @click="getQRCode">生成二维码</button>
					<button v-else class="getQRCodeBtn" @click="saveQR">保存到相册</button>
				</span>
			</view>

		</view>
		<view class="lastBox">
			<view class="topBox">
				<span class="jianjieSpan">
					<image src="/static/book/bookInfo/简介.png" alt="" style="width: 16px;" mode="widthFix" />
					<text class="jianjieTitle">推文简介</text>
					<span @click="copyData(bookInfo.introduce)" class="copySpan">
						<image src="/static/book/bookInfo/复制.png" alt="" style="width: 12px;" mode="widthFix" />
						<text class="copyTitle">复制简介</text>
					</span>
				</span>
				<span @click="copyData(bookInfo.content)" class="copySpan">
					<image src="/static/book/bookInfo/复制.png" alt="" style="width: 12px;" mode="widthFix" />
					<text class="copyTitle">复制免费章节</text>
				</span>
			</view>
			<view class="line"></view>
			<text class="jianjieInfo" user-select>{{bookInfo.introduce}}</text>
		</view>

	</view>
</template>

<script>
	import api from '../../../api/api.js'
	import uQRCode from '../../../common/uqrcode.js'

	import {
		getLocalSaleUserId
	} from '../../../hook/auth.js'
	export default {
		data() {
			return {
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				jianjieInfo: 'dsadasdas', //小说简介
				resultType: 1, //挂载类型 5抖音 6快手
				promotionType: 1, //1搜索码挂载 2二维码挂载
				bookId: '',
				source: 1, //书籍来源 1黑岩 2惊读
				bookInfo: {
					douQRData: "", //抖音二维码图片
					kuaiQRData: "", //快手二维码图片
					searchCode: '', //搜索码
					QRPath: '', //二维码地址
				}, //小说信息
			}
		},
		methods: {
			//获取搜索码显示信息
			getCodeText(searchCode) {
				const self = this
				if (searchCode) {
					const returnRes = self.resultType == 1 ? '抖音' : '快手'
					let gushiName = ''
					switch (self.source) {
						case "1":
							gushiName = '黑岩故事会'
							break;
						case "2":
							gushiName = '惊读故事会'
							break;
						case "3":
						case "4":
						if(self.resultType==1&&self.source==3){
							gushiName = '大江星球'
						}else if(self.resultType==1&&self.source==4){
							gushiName = '小鱼故事会'
						}else if(self.source==3){
							gushiName = '朵米故事会'
						}else if(self.source==4){
							gushiName = '小鱼故事会'
						}
							break;
					}
					return `搜索码已生成
                      打开${returnRes}搜索“${gushiName}”小程序
                      输入口令${searchCode}
                      就可以阅读啦`
				} else {
					return '点击下方生成搜索码吧'
				}
			},
			//保存二维码到相册
			saveQR(){
				let url = ""
				if(this.resultType==1){
					url = this.bookInfo.douQRData
				}else{
					url = this.bookInfo.kuaiQRData
				}
				// 调用保存图片至相册的函数
				uni.saveImageToPhotosAlbum({
				  filePath: url, // 需要保存的图片文件路径
				  success(res) {
				    console.log('保存成功')
					uni.showToast({
						title:"保存成功"
					})
				  },
				  fail(err) {
				    console.error('保存失败', err)
				  }
				})

			},
			//生成搜索码
			getCode() {
				console.log("2165415643", this.bookInfo.searchCode)
				if (!this.bookInfo.searchCode) {
					this.getSearchCode()
				}
			},
			//生成二维码
			getQRCode() {
				if ((this.resultType == 1 && !this.bookInfo.douQRData) ||
					(this.resultType == 2 && !this.bookInfo.kuaiQRData)) {
					this.getSearchCode()
				}
			},
			//获取搜索码和二维码
			getSearchCode() {
				uni.showLoading({
					title: "正在获取"
				})
				const self = this
				const saleUserId = this.getSaleUserId()
				if (saleUserId != false) {
					console.log(saleUserId)
					//组装请求数据
					let req = {
						userId: saleUserId,
						bookId: self.bookId,
						source: self.source,
						resultType: self.resultType
					}
					api.getBookCode(req).then(res => {
						console.log(res.data.searchCode)
						self.bookInfo.searchCode = res.data.code
						if (self.resultType == 1) {
							self.bookInfo.douQRData = res.data.QRurl
							if (res.data.QRpath) {
								self.bookInfo.douQRData = self.makeQrUrl(res.data.QRpath)
							}
						} else if (self.resultType == 2) {
							self.bookInfo.kuaiQRData = res.data.QRurl
							if (res.data.QRpath) {
								self.bookInfo.kuaiQRData = self.makeQrUrl(res.data.QRpath)
							}
						}
						uni.hideLoading()
					})
				} else {
					uni.showToast({
						title: "请先登陆",
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
			},
			 makeQrUrl (urlText) {
				 const self = this
				 uQRCode.make({
					canvasId: 'qrcode',
					text: urlText,
					size: 300,
					margin: 2,
					success: res => {
						if (self.resultType == 1) {
							self.bookInfo.douQRData = res
						}else{
							self.bookInfo.kuaiQRData = res
						}
						console.log('qrcodeSrc = ' + res);
					}
				})
			},
			//检查是否绑定
			getSaleUserId() {
				const res = getLocalSaleUserId()
				if (res.code == 200) {
					console.log('已登录，已绑定，账号:' + res.data)
					return res.data
				} else {
					uni.showToast({
						title: res.data,
						icon: "error"
					})
					return false
				}
			},
			//复制文案到剪贴板
			copyData(data) {
				const self = this
				if (data != null) {
					uni.setClipboardData({
						data: data,
						success: function() {
							console.log('success');
						}
					});
					return
				}
				// uni.showLoading({
				// 	title: "正在获取精选内容"
				// })
				// //先获取精选文案
				// api.getBookChoice({
				// 	bookId: this.bookId
				// }).then(res => {
				// 	console.log(res)
				// 	if (res.code == 1 && !!res.data.content) {
				// 		uni.setClipboardData({
				// 			data: res.data.content,
				// 			success: function() {
				// 				console.log('success');
				// 			}
				// 		});
				// 	} else {
				// 		uni.showToast({
				// 			title: "获取内容失败",
				// 			icon: "fail"
				// 		})
				// 	}
				// })
			},
			//点击挂载快手
			messageToggle(type, text) {
				this.msgType = type
				this.messageText = text
				this.$refs.message.open()
			},
			//切换推广方式
			promotionToggle(type) {
				const self = this
				switch (self.source) {
					case "1":
					uni.showToast({
						title: "黑岩暂时只支持搜索码",
						icon: "none"
					})
							break;
					case "2":
						uni.showToast({
							title: "惊读暂时只支持搜索码",
							icon: "none"
						})
						break;
					case "3":
					self.promotionType = type
					break;
					case "4":
						uni.showToast({
							title: "大鱼暂时只支持搜索码",
							icon: "none"
						})
						break;
				}
			},
			//获取小说信息
			getBookInfo(bookId) {
				const self = this
				api.getBookInfo({
					bookId: bookId,
					source: self.source
				}).then(res => {
					console.log(res)
					self.bookInfo = res.data
					uni.setNavigationBarTitle({
						title: self.bookInfo.name
					});

					uni.hideLoading()
				})
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option); //打印出上个页面传递的参数。
			this.bookId = option.book_id
			this.source = option.source
			this.getBookInfo(option.book_id)
			uni.showLoading({
				title: "正在加载..."
			})
		},
		mounted() {
			console.log(this.bookId)
		}
	}
</script>

<style>
	.QRCodeBox {
		width: 120px;
		height: 120px;
		margin: 0 auto;
		display: block;
		background-color: #fff;
	}

	.getQRCodeBtn {
		width: 93px;
		height: 30px;
		border-radius: 93px;
		background: rgba(18, 205, 217, 1);
		font-size: 12px;
		color: rgba(255, 255, 255, 1);
	}

	.QRText {
		display: block;
		font-size: 10px;
		font-weight: 400;
		color: rgba(229, 229, 229, 1);
		margin: 4px 0;
	}

	.QRBox image {
		width: 130px;
		height: 130px;
		filter: 4px;
	}

	.QRBox {
		display: block;
		margin: 0 auto;
		width: 80%;
		height: 80%;
		border-radius: 10px;
		background: rgba(56, 56, 56, 1);
		border: 1px solid rgba(128, 128, 128, 1);
		text-align: center;
	}

	.jianjieInfo {
		font-size: 12px;
		color: rgba(229, 229, 229, 1);
		display: block;
		width: 100%;
		height: calc(100% - 50px);
		background-color: ;
		overflow-y: auto;
	}

	.line {
		position: relative;
		width: 100%;
		height: 0px;
		border-bottom: 1px solid rgba(87, 87, 87, 1);
		margin: 0 auto;
		margin-top: 10px;
	}

	.copyTitle {
		font-size: 10px;
		font-weight: 400;
		color: rgba(18, 205, 217, 1);
	}

	.jianjieTitle {
		font-size: 14px;
		font-weight: 400;
		color: rgba(229, 229, 229, 1);
	}

	.jianjieTitle,
	.copyTitle {
		display: inline-block;
		position: absolute;
		margin-left: 4px;
		top: 50%;
		width: 80px;
		transform: translateY(-50%);
	}

	.copySpan {
		position: absolute;
		bottom: 0;
		right: 60px;
	}

	.jianjieSpan {
		width: 160px;
		position: absolute;
		bottom: 0;
	}

	.topBox {
		display: block;
		position: relative;
		width: 100%;
		height: 30px;
	}

	.lastBox {
		margin-top: 10px;
		height: calc(100% - 100px - 40px - 42px - 10px - 288px - 10px);
		min-height: 200px;
		border-radius: 10px;
		box-sizing: border-box;
		background: rgba(56, 56, 56, 1);
		padding: 10px;
	}

	.btns {
		position: relative;
		margin-top: 20px;
		height: 28px;
	}

	.courseBtn image {
		position: absolute;
		right: 2px;
		top: 50%;
		transform: translateY(-50%);
		width: 10px;
		height: 10px;
	}

	.courseBtn {
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
		width: 70px;
		height: 20px;
		border-radius: 131px;
		border: 0.5px solid rgba(128, 128, 128, 1);
		background: transparent;
		font-size: 10px;
		font-weight: 400;
		color: rgba(18, 205, 217, 1);
		line-height: 16px;
	}

	.getCodeBtn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 131px;
		height: 28px;
		border-radius: 211px;
		background: rgba(18, 205, 217, 1);

		font-size: 12px;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.textBox {
		display: block;
		margin: 0 auto;
		width: 310px;
		height: 152px;
		border-radius: 5px;
		background: rgba(56, 56, 56, 1);
		border: 1px solid rgba(128, 128, 128, 1);
		font-size: 14px;
		font-weight: 400;
		color: rgba(229, 229, 229, 1);
		padding: 8px;
	}

	.promotionInfo {
		padding-top: 12px;
		width: 100%;
		height: calc(100% - 44px);
		border-radius: 0px 10px 10px 10px;
		background: rgba(56, 56, 56, 1);
		box-sizing: border-box;
	}

	.promotionTitle {
		padding-top: 44px;
		box-sizing: border-box;
	}

	.promotionTitle .seleCodeTitle {
		background: url(/static/book/bookInfo/矩形 1.png) no-repeat center center;
		font-size: 14px;
		font-weight: 500;
		color: rgba(18, 205, 217, 1);
		background-size: 100%;
	}

	.promotionTitle .seleQRCodeTitle {
		background: url(/static/book/bookInfo/矩形 2.png) no-repeat center center;
		font-size: 14px;
		font-weight: 500;
		color: rgba(18, 205, 217, 1);
		background-size: 100%;
	}

	.codeTitle,
	.QRCodeTitle {
		top: 0;
		position: absolute;
		display: block;
		width: 210px;
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 14px;
		font-weight: 500;
		color: rgba(128, 128, 128, 1);
	}

	.promotionBox {
		position: relative;
		width: 100%;
		height: 288px;
		background-color: rgba(48, 48, 48, 1);
		border-radius: 10px;
		margin-top: 10px;
	}

	.plateSele {
		height: 42px;
	}

	.plateSele button {
		width: 100px;
		height: 42px;
		opacity: 1;
		display: inline-block;
		border-radius: 5px;
		margin-right: 20px;
		background: transparent;
		line-height: 36px;
		vertical-align: top;
	}

	.plateSele .selePlate {
		background: url(/static/book/bookInfo/选中状态@2x.png) no-repeat center center;
		background-size: 100%;
		font-size: 12px;
		color: rgba(255, 255, 255, 1);
	}

	.plateSele .unSelePlate {
		height: 36px;
		color: rgba(166, 166, 166, 1);
		border: 1px solid rgba(128, 128, 128, 1);
		font-size: 12px;
	}

	.seleTip {
		display: block;
		height: 20px;
		margin: 10px 0;
	}

	.seleTip image {
		width: 16px;
		height: 16px;
		vertical-align: middle;
		margin-right: 7px;
	}

	.seleTip text {
		font-size: 14px;
		vertical-align: middle;
		line-height: 20.27px;
		color: rgba(229, 229, 229, 1);
	}

	.content {
		width: 100%;
		height: 100vh;
		padding: 10px;
		box-sizing: border-box;
		background-color: rgba(34, 34, 34, 1);
		overflow-x: hidden;
	}

	/* 书item样式 */
	.title {
		display: inline-block;
		position: absolute;
	}

	.booksItem button {
		position: absolute;
		right: 9px;
		bottom: 10px;
		width: 58px;
		height: 23.77px;
		border-radius: 16.53px;
		background: rgba(18, 205, 217, 1);
		border: 0.74px solid rgba(0, 186, 173, 1);
		box-shadow: 0px 0.74px 1.49px rgba(67, 207, 124, 0.25);
		font-size: 10.4px;
		color: rgba(255, 255, 255, 1);
	}

	.booksItem .title2 image {
		margin-left: 4px;
		width: 10px;
		height: 10px;
	}

	.title2 {
		display: inline-block;
		height: 18px;
		background: linear-gradient(135deg, rgba(18, 205, 217, 0.23) 0%, rgba(18, 205, 217, 0) 100%);
		font-size: 12px;
		color: rgba(229, 229, 229, 1);
		/* line-height: 28px; */
		vertical-align: bottom;
		margin-bottom: 5px;
	}

	.title span {
		display: inline-block;
		width: 50px;
		height: 22px;
		font-size: 6px;
		line-height: 7.03px;
		color: rgba(255, 255, 255, 1);
		background: url(/static/home/画板1.png) no-repeat center center;
		background-size: 100%;
		text-align: right;
		line-height: 28px;
		padding-right: 4px;
		margin-left: 4px;
	}

	.booksItem .bookName {
		display: inline-block;
		font-size: 14px;
		font-weight: 500;
		color: rgba(100, 217, 238, 1);
	}

	.booksItem image {
		height: 100%;
	}

	.booksItem {
		width: 100%;
		height: 100px;
		/* height: 100px; */
		border-radius: 5px;
		position: relative;
		padding-left: 8px;
		padding-top: 5px;
		box-sizing: border-box;
		background-color: rgba(56, 56, 56, 1);
	}
</style>